<template>
  <view>
    <!-- 弹窗组件 -->
    <u-popup :show="localShow" mode="bottom" :round="20" @close="closePop">
      <view class="popup-container">
        <!-- 滚动内容区 -->
        <scroll-view scroll-y class="content-scroll">
          <view class="popup-header">
            <view class="title">请选择惠收卡客服</view>
            <view class="time">{{ appConfig.svctm }}</view>
          </view>

          <!-- 客服选项 -->
          <view class="service-list">
            <view v-for="(item, index) in serviceList" :key="index" class="service-item"
                  @click="handleService(item.type)">
              <image :src="item.url" class="item-icon"></image>
              <view class="item-info">
                <text class="label">{{ item.label }}</text>
              </view>
            </view>
          </view>
        </scroll-view>

        <!-- 固定取消按钮 -->
        <view class="cancel-btn" @click="closePop">取消</view>
      </view>
    </u-popup>

    <u-popup :show="showTipPopup" @close="closeTipPop()" round="36rpx" mode="center" :safeAreaInsetBottom="false">
      <view>
        <view style="text-align: center; margin-top: 30rpx; font-size: 32rpx; color: #000; font-weight: bold;">
          温馨提示</view>
        <view style="text-align: center; margin-top: 34rpx; font-size: 28rpx; color: #5C6166; margin-left: 40rpx; margin-right: 40rpx">
          您已复制微信客服链接,请使用浏览器打开</view>
        <view style="width: 100%; height: 2rpx; background-color: #F0F0F0; margin-top: 46rpx;"></view>
        <view
            style="text-align: center; margin-top: 20rpx; margin-bottom: 20rpx; font-size: 32rpx; color: #000; font-weight: bold;"
            @click="closeTipPop()">
          我知道了</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: "service-popup",
  data() {
    return {
      appConfig: null,
      serviceList: [{
        type: 'qq',
        label: 'QQ:3926855352',
        icon: 'qq-fill',
        color: '#12B7F5',
        url: '../../static/images/ic_customer_qq.png'
      },
        {
          type: 'wechat',
          label: '微信在线客服',
          icon: 'weixin-fill',
          color: '#09BB07',
          url: '../../static/images/ic_customer_wx.png'
        },
        {
          type: 'tel',
          label: '电话咨询客服',
          icon: 'phone-fill',
          color: '#2979FF',
          url: '../../static/images/ic_customer_phone.png'
        }
      ],
      localShow: this.show,
      showTipPopup: false,
    };
  },
  async mounted() {
    this.appConfig = await this.$app.getAppConfit();
  },
  props: {
    show: Boolean, // 控制显示
  },
  watch: {
    show(newVal) {
      this.localShow = newVal;
    }
  },
  methods: {
    closeTipPop() {
      this.showTipPopup = false;
    },
    handleService(type) {
      console.log(this.appConfig)
      switch (type) {
        case 'qq':
          // 复制qq号
          this.$app.toCopy(this.appConfig.qq)
          break
        case 'wechat':
          uni.setClipboardData({
            data: this.appConfig.wechat,
            success: function () {
              uni.hideToast();
            },
            fail: function (err) {
              uni.showToast({
                title: '复制失败',
                duration: 2000,
                icon: 'none'
              });
            }
          });
          break
        case 'tel':
          // 拨打客服电话
          uni.makePhoneCall({
            phoneNumber: this.appConfig.phone
          })
          break
      }
      this.localShow = false
      this.$emit('update:show', false)
      if (type == "wechat"){
        this.showTipPopup = true;
      }
    },
    closePop() {
      this.localShow = false
      this.$emit('update:show', false)
    },
  }
}
</script>

<style lang="scss" scoped>
.popup-container {
  height: 100%;
  display: flex;
  flex-direction: column;

  .content-scroll {
    flex: 1;
  }

  .popup-header {
    text-align: center;
    padding: 40rpx 0;

    .title {
      font-size: 32rpx;
      color: #323233;
      margin-bottom: 16rpx;
    }

    .time {
      font-size: 28rpx;
      color: #969799;
    }
  }

  .service-list {
    margin-bottom: 16rpx;

    .service-item {
      display: flex;
      align-items: center;
      padding: 28rpx;
      justify-content: center;

      .item-icon {
        margin-right: 18rpx;
        height: 35rpx;
        width: 35rpx;
      }

      .item-info {
        .label {
          font-size: 32rpx;
          color: #323233;
        }
      }
    }
  }

  .cancel-btn {
    padding: 28rpx 0;
    color: #646566;
    font-size: 32rpx;
    text-align: center;
  }
}
</style>